可编辑列表
本示例展示如何在 Scripting 应用中使用 List、ForEach 和 EditButton 组件构建一个支持 删除与排序操作 的可编辑列表。
概览
你将学习如何：
- 使用
ForEach 渲染动态列表项
- 实现列表项的删除和拖动排序功能
- 使用
EditButton 启用编辑模式
- 通过
useState 管理列表的状态
示例代码
1. 导入所需模块
1import { Color, EditButton, ForEach, List, Navigation, NavigationStack, Script, Text, useState } from "scripting"
2. 定义组件状态
使用 useState 初始化颜色字符串数组作为列表数据：
1const [colors, setColors] = useState<Color[]>([
2 "red",
3 "orange",
4 "yellow",
5 "green",
6 "blue",
7 "purple",
8])
3. 处理删除操作
onDelete 方法根据传入的索引数组移除对应的列表项：
1function onDelete(indices: number[]) {
2 setColors(colors.filter((_, index) => !indices.includes(index)))
3}
4. 处理拖动排序操作
onMove 方法将被拖动的元素插入至目标位置：
1function onMove(indices: number[], newOffset: number) {
2 const movingItems = indices.map(index => colors[index])
3 const newColors = colors.filter((_, index) => !indices.includes(index))
4 newColors.splice(newOffset, 0, ...movingItems)
5 setColors(newColors)
6}
5. 构建可编辑列表界面
主界面使用 NavigationStack 和 List 构建，并通过 toolbar 添加 EditButton 实现编辑模式：
1return <NavigationStack>
2 <List
3 navigationTitle={"Editable List"}
4 navigationBarTitleDisplayMode={"inline"}
5 toolbar={{
6 confirmationAction: [
7 <EditButton />,
8 ]
9 }}
10 >
11 <ForEach
12 count={colors.length}
13 itemBuilder={index =>
14 <Text
15 key={colors[index]} // 每项必须提供唯一 key
16 >{colors[index]}</Text>
17 }
18 onDelete={onDelete}
19 onMove={onMove}
20 />
21 </List>
22</NavigationStack>
6. 启动视图并退出脚本
1async function run() {
2 await Navigation.present({
3 element: <Example />
4 })
5
6 Script.exit()
7}
8
9run()
关键组件说明
- List：用于展示可滚动的列表视图。
- ForEach：根据指定数量动态渲染子视图。
- EditButton：切换列表的编辑模式，支持删除和排序操作。
- onDelete / onMove：在用户删除或拖动项时调用的回调函数。
- useState：用于追踪和更新当前的列表数据。
注意事项
ForEach 中的每个子项必须提供唯一的 key，以确保视图更新正常。- 仅在编辑模式下才能进行删除和排序操作，需通过
EditButton 启用。
适用场景
- 可排序的任务列表或待办事项
- 支持编辑的设置项集合
- 根据用户输入动态更新的内容展示
该示例为你创建交互式脚本或工具提供了灵活的列表功能模板。
